<template>
  <view v-if="goodsInfo" class="goods-detail">
      <!-- 1 轮播图 -->
      <u-swiper 
      :list="goodsInfo.pics"
      name="pics_big"
      :height="500"
      img-mode="aspectFit"
      bg-color="#fff"
      @click="handlePreviewImage"
      ></u-swiper>

      <!-- 2 价格和名称 -->
      <view class="goods-info u-p-20">
          <view class="goods-price">￥{{goodsInfo.goods_price}}</view>
          <view class="goods-name u-line-2">{{goodsInfo.goods_name}}</view>
      </view>
      <view>
          <u-line color="#eee" />
          <u-line color="#eee" />
          <u-line color="#eee" />
          <u-line color="#eee" />
          <u-line color="#eee" />
      </view>

     <!-- 3 图文详情 -->
    <view class="goods-detail-wrap">
      <view class="title u-text-center u-m-10 u-font-30">图文详情</view>
      <!-- vue中用法 uniapp不建议   -->
      <!-- <view v-html="goodsInfo.goods_introduce"></view> -->
      <!-- 小程序中  更加简单的场景 -->
      <!-- <rich-text :nodes="goodsInfo.goods_introduce"></rich-text> -->
      <!-- uview 文章详情 图文详情 -->
      <u-parse :html="goodsInfo.goods_introduce"></u-parse>
    </view>

    <!-- 底部的订单 -->
    	<view class="navigation navigations">
		<view class="left">
			<view class="item">
				<u-icon name="server-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
				<view class="text u-line-1">客服</view>
			</view>

			<navigator open-type="switchTab"
                url="/pages/cart/cart" class="item car">
				<u-badge class="car-num" :count="totalCount" type="error" :offset="[-3, -6]"></u-badge>
				<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
				<view class="text u-line-1">购物车</view>
			</navigator>
		</view>
		<view class="right">
		<view
          class="cart btn u-line-1"
          @click="handlePush"
        >加入购物车 {{cartList.length}}</view>
			<view class="buy btn u-line-1">立即购买</view>
		</view>
	</view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
    data(){
        return{
            // 商品详情信息
            goodsInfo:null
        }
    },
    computed:{
        ...mapState(["cartList"]),
        // 总商品数量
        totalCount(){
            // reduce
            return this.cartList.reduce((sum,goods) => (sum+=goods.num),0)
        }
    },
//    async onLoad(goods_id = 43986){
   async onLoad(option){
       // 解构同时 给它默认值
        const {goods_id = 43986} = option
        // console.log(15,id);
        const res = await this.$u.get("/goods/detail",{goods_id})
        // console.log(17,res);
        this.goodsInfo = res.message
    },
    methods: {
        // 点击轮播图放大预览
        handlePreviewImage(index) {
        // 构造 预览图片要的参数 urls 图片地址数组
        const urls = this.goodsInfo.pics.map((pic) => pic.pics_big);
        // 想要即时显示图片路径
        const current = urls[index];
        //  调用小程序中的api 全屏预览 图片
        uni.previewImage({ urls, current });
        },
        // 点击加入购物车
    handlePush() {
      /* 
      1 如果该商品以前没有添加过  直接给数组 push添加一种商品即可
        this.goodsInfo.goods_id 
        购物车数组还没有获取 vuex
      2 如果该商品已经存在于购物车中，  修改该商品的购买数量
       */

      // 1 先判断一下当前商品id是否存在于 购物车数组中  findIndex
      const index = this.cartList.findIndex(
        (goods) => this.goodsInfo.goods_id === goods.goods_id
      );
      const newList = [...this.cartList];
      //  不存在
      if (index === -1) {
        // 数组中添加一个元素
        newList.push({
          ...this.goodsInfo, //id
          checked: true, // 选中状态
          num: 1, // 购买数量
        });
      } else {
        // 找到 修改元素 数量
        newList[index].num++;
      }

      // 3 修改到 vuex 调用mutations
      this.$store.commit("setCartList", newList);
    },
    },
}
</script>

<style lang="scss">
.goods-detail{
    margin-bottom: 102rpx;
}
.navigations{
    display: flex;
    .left{
        flex: 1;
    }
    .right{
        flex: 2;
    }
}
.navigation {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
	display: flex;
	margin-top: 100rpx;
	border: solid 2rpx #f2f2f2;
	background-color: #ffffff;
	padding: 16rpx 0;
	.left {
		display: flex;
		font-size: 20rpx;
		.item {
			margin: 0 30rpx;
			&.car {
				text-align: center;
				position: relative;
				.car-num {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
				}
			}
		}
	}
	.right {
		display: flex;
		font-size: 28rpx;
		align-items: center;
		.btn {
			line-height: 66rpx;
			padding: 0 30rpx;
			border-radius: 36rpx;
			color: #ffffff;
		}
		.cart {
			background-color: #ed3f14;
			margin-right: 30rpx;
		}
		.buy {
			background-color: #ff7900;
		}
	}
}
    .goods-info{
        .goods-price{
            color: $themeColor;
        }
    }
</style>